<template>
  <div class="box">
    <div>
      <div class="page__bd page__bd_spacing">
        <div class="weui-flex">
          <div class="weui-flex__item" >
            <radio-group class="radioBox">
              <label class="weui-check__label" v-for="(item , index) in feedbackType" :key="index">
                <radio :value="item.value"/>
                <view class="weui-cell__bd"  @click="radioChange(item.value)" :class="radioCheckVal==item.value?'active':''">{{item.name}}</view>
              </label>
            </radio-group>
          </div>
        </div>
      </div>
    </div>
    <div class="content">
      <textarea placeholder="请输入内容，不超过300字。" v-model="content" maxlength="300"></textarea>
      <div>
        <text>{{content.length}}</text>/300
      </div>
    </div>
    <div class="btn">
      <input type="tel" v-model="phone" placeholder="请输入手机号">
    </div>
    <div class="btn">
      <button @click="doSubmit">提交</button>
    </div>
  </div>
</template>

<script>
  export default {
    name: "index",
    data(){
      return{
        feedbackType:[
          {name:'投诉',value:'1'},
          {name:'建议',value:'2'},
          {name:'问题',value:'3'},
          {name:'其他',value:'4'},
        ],
        radioCheckVal: 1,
        content: '',//投诉内容,
        phone: ''
      }
    },
    methods:{
      radioChange(index){
        this.radioCheckVal = index
      },
      doSubmit() {
        wx.request({
          url: this.$baseUrl + "/feedback/doAdd",
          method: 'post',
          data: {
            type: this.radioCheckVal,
            content: this.content,
            phone: this.phone,
          },
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          success: function (res) {
            let flag = res.data.flag
            let title = ''
            let icon = 'none'
            if (flag === 0) {
              title = '提交成功'
              icon = 'success'
            } else if (flag === 1) {
              title = '反馈类型为空'
            } else if (flag === 2) {
              title = '反馈内容为空'
            } else if (flag === 3) {
              title = '反馈内容太长'
            } else if (flag === 4) {
              title = '手机号为空'
            } else if (flag === 5) {
              title = '手机号格式不正确'
            } else if (flag === -1) {
              title = '服务器繁忙，请稍后重试'
            }
            wx.showToast({
              title: title,
              icon: icon,
              duration: 2000
            })
          }
        })
      }
    }
  };
</script>

<style lang="scss" scoped>
  @import "../../../../static/css/basis";
  .weui-flex {
    padding: 30rpx;
  }
  .weui-flex__item {
    margin: 7.5rpx;
  }
  .radioBox {
    display: flex;
    radio {
      display: none;
    }
    .weui-check__label {
      flex: 1;
      color: #666;
      text-align: center;
      .weui-cell__bd {
        width:156rpx;
        height:68rpx;
        border:1px solid rgba(204,204,204,1);
        border-radius:4rpx;
        font-size: 28rpx;
        color: #333;
        line-height: 68rpx;
        &.active {
          background-color: $colorRed;
          color: #fff;
          border: 0;
        }
      }
    }

  }
  .content {
    position: relative;
    padding:30rpx 30rpx 0;
    font-size: 28rpx;
    textarea {
      display: block;
      width: 100%;
      padding: 30rpx;
      height:314rpx;
      background:rgba(255,255,255,1);
      box-shadow:0px 4rpx 12rpx 0 rgba(0, 0, 0, 0.03);
      border-radius:10rpx;;
    }
    div {
      position: absolute;
      left: 0;
      right: 40rpx;
      bottom: 0;
      font-size: 12px;
      color: #999;
      text-align: right;
      text{
        color: #333;
      }
    }
  }
  .btn{
    padding:40rpx 30rpx 80rpx;
    input {
      width:100%;
      height:90rpx;
      padding: 0 30rpx;
      font-size: 28rpx;
      background:rgba(255,255,255,1);
      box-shadow:0 4rpx 12rpx 0 rgba(0, 0, 0, 0.03);
      border-radius:10rpx;
    }
    button {
      background-color: $colorRed;
      height: 90rpx;
      border-radius: 10rpx;
      color: #ffffff;
    }
  }

</style>
